<template>
  <div id="footer">
    <!-- 底部 -->
    <ul>
      <li v-for="(item,index) in Tabbar" :key="index">
        <router-link :to="item.path">
          <i :class="['iconfont', item.icon,tabbarIndex!=index?'':'active']"></i>
          <span :class="[index == tabbarIndex?'hasColor':'']">{{item.title}}</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      Tabbar: [
        {
          title: this.$t("m.home"),
          icon: "icon-zhuye",
          path: "/home"
        },
        {
          title: this.$t("m.news"),
          icon: "icon-info",
          path: "/news"
        },
        {
          title: this.$t("m.assets"),
          icon: "icon-zichan",
          path: "/assets"
        },
        {
          title: "交易",
          icon: "icon-hangqing",
          path: "/quotation"
        },
        {
          title: this.$t("m.mine"),
          icon: "icon-wode",
          path: "/mine"
        }
      ]
    };
  },
  created() {},
  components: {},
  computed: {
    ...mapState({
      tabbarIndex: state => state.tabbarIndex
    })
  },
  methods: {}
};
</script>
<style lang="scss" scoped type="text/scss">
#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  background: #fff;
  box-shadow: 0 -0.05rem 0.1rem rgba(0, 0, 0, 0.07);
  z-index: 999;

  ul {
    display: flex;
    box-sizing: border-box;
    li {
      flex: 1;
      height: 1rem;
      a {
        height: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 0.16rem;
        color: #a8a7ab;
        i {
          font-size: 0.4rem;
          margin-bottom: 0.05rem;
          font-weight: bold;
          &.active {
            color: #e4b577;
          }
        }
      }
      span.hasColor {
        color: #e4b577;
      }
    }
  }
}
</style>